<template>
  <div>
    <div class="header">
      <div class="header-inner clearfix">
        <div class="movie-info-left">
          <div class="avatar-shadow">
            <el-image class="avatar" :src="cinemaInfo.image" />
          </div>
        </div>
        <div class="movie-info-right">
          <div class="movie-info-msg">
            <h1 class="movie-name">{{ cinemaInfo.name }}</h1>
            <div class="phone-number">{{ cinemaInfo.address }}</div>
            <div class="phone-number">电话: {{ cinemaInfo.telephone }}</div>
            <div class="phone-number">
              {{ cinemaInfo.district.name }} | {{ cinemaInfo.brand.name }}
            </div>
            <div style="margin: 25px 0">影院服务 ————————————————————</div>
            <div
              class="service"
              v-for="item in cinemaInfo.serveList"
              :key="item.id"
            >
              <span class="service-tag">{{ item.name }}</span>
              {{ item.information }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="movie-info-detail-container">
      <div class="movie-info-detail clearfix">
        <div class="main-content">
          <!-- 当前影院上映的所有电影 -->
          <div
            class="movie-list-container"
            v-if="cinemaInfo.movieList.length !== 0"
          >
            <span class="scroll-prev scroll-btn" @click="prevPage"></span>
            <span class="scroll-next scroll-btn" @click="nextPage"></span>
            <div
              class="movie-list"
              ref="movieListRef"
              :style="'left:' + left + 'px'"
            >
              <div
                class="movie"
                v-for="item in cinemaInfo.movieList"
                :key="item.id"
                :class="{ active: item.id === activeMovie }"
                @click="activeMovie = item.id"
              >
                <img :src="item.image" />
              </div>
            </div>
          </div>

          <!-- 当前选中电影信息 -->
          <div class="show-list" v-if="cinemaInfo.movieList.length !== 0">
            <div class="show-movie-info">
              <div>
                <h2 class="show-movie-name">
                  {{ movieDict[activeMovie].nameCn }}
                </h2>
                <span class="show-movie-score sc">
                  {{ movieDict[activeMovie].score.toFixed(1) }}
                </span>
              </div>
              <!-- 电影描述 -->
              <div class="show-movie-desc">
                <div>
                  <span class="key">时长 : </span>
                  <span>{{ movieDict[activeMovie].time }}分钟</span>
                </div>
                <div>
                  <span class="key">类型 : </span>
                  <span>
                    {{ movieDict[activeMovie].categoryNameList.join(" / ") }}
                  </span>
                </div>
                <div>
                  <span class="key">主演 : </span>
                  <span>
                    {{ movieDict[activeMovie].actorNameList.join(" / ") }}
                  </span>
                </div>
              </div>
            </div>
            <!-- 展示场次的日期 -->
            <div class="show-date" v-if="laminationList.length !== 0">
              <span>观影时间 :</span>
              <span
                class="date-item"
                :class="{ active: activeDate === key }"
                @click="activeDate = key"
                v-for="(item, key) in laminationDict"
                :key="key"
              >
                {{ key }}
              </span>
            </div>
            <div class="session-info">
              <el-table
                ref="table"
                :data="laminationDict[activeDate]"
                stripe
                style="width: 100%"
              >
                <el-table-column label="放映时间">
                  <template slot-scope="scope">
                    <span class="begin-time">
                      {{ scope.row.startTime }}
                    </span>
                    <br />
                    <span class="end-time"> {{ scope.row.endTime }}散场 </span>
                  </template>
                </el-table-column>
                <el-table-column prop="langVersion" label="语言版本">
                </el-table-column>
                <el-table-column label="放映厅">
                  <template slot-scope="scope">
                    {{ scope.row.hall.name }}
                    <br />
                    {{ scope.row.tips }}
                  </template>
                </el-table-column>
                <el-table-column label="售价">
                  <template slot-scope="scope">
                    <span class="sell-price">
                      <span class="stonefont">
                        {{ scope.row.price }}
                      </span>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="选座购票">
                  <template slot-scope="scope">
                    <router-link :to="'/seat/' + scope.row.id">
                      <el-button
                        type="primary"
                        round
                      >
                        选座购票
                      </el-button>
                    </router-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cinemaId: this.$route.params.cinemaId,
      cinemaInfo: {},
      //用于获取指定id的电影信息
      movieDict: {},
      laminationDict: {},
      laminationList: [],
      activeMovie: 1,
      activeDate: "",
      left: 0,
      movieListWidth: 0,
    };
  },
  watch: {
    activeMovie() {
      this.getLaminationList();
    },
  },
  created() {
    this.getCinemaDetail();
    this.getLaminationList();
  },
  methods: {
    prevPage() {
      let tmp = window.getComputedStyle(this.$refs.movieListRef).width;
      this.movieListWidth = Number.parseInt(tmp.substring(0, tmp.length - 2));
      if (this.left < 0) this.left += 1200;
    },
    nextPage() {
      let tmp = window.getComputedStyle(this.$refs.movieListRef).width;
      this.movieListWidth = Number.parseInt(tmp.substring(0, tmp.length - 2));
      if (this.movieListWidth + this.left - 1200 > 0) {
        this.left -= 1200;
      }
    },
    getCinemaDetail() {
      this.axios
        .get("/api/cinema/detail", {
          params: {
            cinemaId: this.cinemaId,
          },
        })
        .then(({ data }) => {
          if (data.code === 200) {
            this.cinemaInfo = data.data;
            this.cinemaInfo.movieList.forEach((movie) => {
              movie.categoryNameList = [];
              movie.actorNameList = [];
              movie.categoryList.forEach((category) => {
                movie.categoryNameList.push(category.name);
              });
              movie.actorList.forEach((actor) => {
                movie.actorNameList.push(actor.name);
              });
              this.movieDict[movie.id] = movie;
            });
            this.activeMovie = this.cinemaInfo.movieList[0].id;
          } else {
            this.$notify.error({
              title: "失败",
              message: data.message,
            });
          }
        });
    },
    getLaminationList() {
      this.axios
        .get("/api/lamination/detail", {
          params: {
            cinemaId: this.cinemaId,
            movieId: this.activeMovie,
          },
        })
        .then(({ data }) => {
          if (data.code === 200) {
            this.laminationList = data.data;
            this.laminationDict = {};
            this.laminationList.forEach((lamination) => {
              if (!this.laminationDict[lamination.startDate]) {
                this.laminationDict[lamination.startDate] = [];
              }
              this.laminationDict[lamination.startDate].push(lamination);
            });
            this.activeDate = this.laminationList[0].startDate;
          } else {
            this.$notify.error({
              title: "失败",
              message: data.message,
            });
          }
        });
    },
    doLayout() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  cursor: pointer;
}

.header {
  padding: 0;
  width: 100%;
  min-width: 1200px;
  background: url("../../assets/movie-info-background.jpg");
}

.header-inner {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

.movie-info-left {
  width: 360px;
  float: left;
  position: relative;
  top: 49px;
  overflow: hidden;
}

.movie-info-left .avatar-shadow {
  width: 300px;
  height: 300px;
  background-size: 300px 50px;
  position: relative;
}

.avatar-shadow {
  position: relative;
  margin: 0 30px;
  width: 240px;
  height: 330px;
  padding-bottom: 40px;
  background: url()
    no-repeat bottom;
}

.avatar {
  border: 4px solid #fff;
  height: 300px;
  width: 300px;
}

.movie-info-msg {
  position: absolute;
  color: #fff;
  font-size: 14px;
  z-index: 1;
}

.movie-name {
  width: 900px;
  margin-top: 0;
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 64px;
}

.phone-number {
  font-size: 14px;
  width: 340px;
  line-height: 1.3;
  margin: 5px 0;
}

.movie-info-msg .phone-number:last-child {
  margin-bottom: 14px;
}

ul {
  width: 250px;
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

ul li {
  margin: 12px 0;
  line-height: 100%;
}

.movie-info-right {
  height: 300px;
  position: relative;
  margin-right: 30px;
  margin-left: 380px;
  margin-top: 40px;
}

.service {
  font-size: 12px;
  margin-bottom: 5px;
}

.service-tag {
  padding: 0 10px;
  margin: 0 20px;
  border: 1px solid #eeeeee;
}

.movie-info-detail-container {
  width: 1200px;
  margin: 0 auto;
}

.movie-info-detail {
  margin-top: 80px;
  display: flex;
}

.main-content {
  width: 1200px;
  margin: 20px auto;
}

.crumbs-nav-container {
  margin-bottom: 25px;
  color: #333;
}

.crumbs-nav-container a {
  color: inherit;
}

.movie-list-container {
  height: 280px;
  padding: 22px 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-box-shadow: inset 0 0 100px 80px #ededed;
  box-shadow: inset 0 0 100px 80px #ededed;
  position: relative;
}

.movie-list-container .movie-list {
  white-space: nowrap;
  position: relative;
  display: table;
  left: 0;
  -webkit-transition: left 0.2s ease;
  transition: left 0.2s ease;
}

.movie-list-container .movie {
  width: 162px;
  height: 227px;
  border: 4px solid #fff;
  -webkit-box-shadow: 0 1px 3px 0 hsla(0, 0%, 66%, 0.5);
  box-shadow: 0 1px 3px 0 hsla(0, 0%, 66%, 0.5);
  display: inline-block;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transform: scale(0.82);
  -ms-transform: scale(0.82);
  transform: scale(0.82);
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
  word-spacing: 0;
}

.movie-list-container .movie.active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  border-color: #f24030;
}

.movie-list-container .movie img {
  width: 100%;
  height: 100%;
}

.movie-list-container .scroll-prev {
  z-index: 10;
  left: 0;
  background-image: url();
}

.movie-list-container .scroll-btn {
  z-index: 8;
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 100%;
  top: 0;
  background-repeat: no-repeat;
  background-position: 50%;
}

.movie-list-container .scroll-next {
  right: 0;
  background-image: url();
}

.show-movie-info {
  margin-top: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.show-movie-info .show-movie-name {
  display: inline-block;
  margin: 0 20px 20px 0;
  font-size: 26px;
  font-weight: 400;
  color: #333;
}

.show-movie-score {
  display: inline-block;
  font-size: 24px;
  color: #faaf00;
}

.show-movie-info .sc::after {
  content: "\5206";
  font-size: 12px;
}

.show-movie-desc > div {
  display: inline-block;
  font-size: 14px;
  color: #151515;
  margin-bottom: 20px;
  margin-right: 40px;
}

.show-movie-desc .key {
  color: #999;
}

.show-list .show-date {
  padding: 30px 0;
  font-size: 14px;
  color: #999;
}

.show-list .show-date .date-item {
  display: inline-block;
  background-color: transparent;
  border-radius: 100px;
  color: #333;
  padding: 2px 10px;
  margin-left: 12px;
  cursor: default;
}

.show-list .show-date .date-item.active {
  color: #fff;
  background-color: #409eff;
}

.sell-price {
  font-size: 18px;
  color: #f03d37;
  font-weight: 700;
}

.sell-price:before {
  content: "\FFE5";
  font-size: 12px;
}

.show-list .begin-time {
  font-size: 18px;
  color: #333;
  font-weight: 700;
}

.show-list .end-time {
  font-size: 12px;
  color: #999;
}

.session-info >>> tr {
  height: 82px;
}

.session-info >>> td {
  text-align: left;
  width: 20%;
}
</style>
